<template>
  <!-- 关联运输工具组件 -->
  <div>

    <el-form ref="formData" :model="form" :rules="rules" label-width="138px" label-suffix=":" size="small"
      class="flex-form-4">
      <el-form-item label="车架号" prop="transportId">
        <el-input v-model.trim="form.transportId" placeholder="请输入车架号" />
      </el-form-item>
      <el-form-item label="车牌号" prop="transportName">
        <el-input v-model.trim="form.transportName" placeholder="请输入车牌号" />
      </el-form-item>
      <el-form-item label="车辆位置" prop="location">
        <el-select v-model.trim="form.location" placeholder="请选择车辆位置">
          <el-option v-for="(item, index) in select_vehicle_location" :key="index" :label="item.label"
            :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="IC卡号" prop="icCard">
        <el-input v-model.trim="form.icCard" placeholder="请输入临牌" />
      </el-form-item>
      <el-form-item label="电子车牌" prop="rfid">
        <el-input v-model.trim="form.rfid" placeholder="请输入电子车牌" />
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button type="primary" plain icon="el-icon-delete" @click="resetVehicleForm()" size="small">重置</el-button>
      <el-button type="success" icon="el-icon-check" @click="submitForm()" size="small">确认</el-button>
    </div>



    <el-table :data="submitVehicleList" size="mini" style="width: 100%; margin-top: 15px;" border>
      <el-empty slot="empty" :image="require('@/assets/images/empty.png')" :image-size="80"></el-empty>
      <el-table-column prop="transportId" label="车架号" align="center"></el-table-column>
      <el-table-column prop="transportName" label="车牌号" align="center"></el-table-column>
      <el-table-column prop="location" label="车辆位置" align="center">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.bill_vehicle_location" :value="scope.row.location" />
        </template>
      </el-table-column>
      <el-table-column prop="icCard" label="IC卡" align="center"></el-table-column>
      <el-table-column prop="rfid" label="电子车牌" align="center"></el-table-column>
      <el-table-column fixed="right" label="操作" width="120" v-if="dialogType != 'detail'">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="handleClickEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="text"
            @click.native.prevent="deleteVehicleItem(scope.$index, submitVehicleList)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="submitVehicleList.length > 0" :small="true" :total="submitVehicleList.length"
      :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
  </div>
</template>

<script>
  export default {
    dicts: ["bt_vehicle_type", "bill_vehicle_location"],
    props: {
      editVehicleData: {
        type: Array,
        default: () => []
      },
      dialogType: {}
    },
    data() {
      return {
        tableData: [],
        //车辆序号默认从1开始
        curVehicleNo: 1,
        selectedList: [],
        submitVehicleList: [],
        showDrawer: false,
        searchValue: "",
        //车辆位置选择
        select_vehicle_location: [{
          value: '0',
          label: '未进场'
        }, {
          value: '1',
          label: '已进场'
        }, {
          value: '2',
          label: '已出场'
        }],
        //车辆集装箱列表
        vahicleContaList: [],
        //单个车辆的集装箱列表
        itemVahicleContaList: [],
        //编辑索引
        editIndex: null,
        vehicleItemOpType: 'add',

        queryParams: {
          pageNum: 1,
          pageSize: 10,
          plateNo: ""
        },
        total: 0,
        form: {
          id: null,
          platSeqNo: null,
          transportId: null,
          transportName: null,
          icCard: null,
          rfid: null,
          location: '0',
          vehicleStatus: "0"
        },
        rules: {
          transportId: [{
            required: true,
            message: "车架号不能为空",
            trigger: ["blur", "change"],
          }, ],
          location: [{
            required: true,
            message: "车辆位置不能为空",
            trigger: ["blur", "change"],
          }, ],
        }
      };
    },
    watch: {
      "editVehicleData": {
        immediate: true,
        handler(val) {
          if (val) {
            this.submitVehicleList = this.editVehicleData;
          }
        }
      },
    },
    methods: {

      resetVehicleForm() {
        this.$refs["formData"].resetFields();
        this.initVehicleForm();
      },
      //初始化表单，因为编辑过后某些字段没有清空
      initVehicleForm() {
        this.form.id = null;
        this.form.platSeqNo = null;
        this.form.transportId = null;
        this.form.transportName = null;
        this.form.selfWt = null;
        this.form.icCard = null;
        this.form.rfid = null;
        this.form.location = '0';
        this.form.vehicleStatus = null;
      },

      handleAddVehicle() {
        this.selectedList = [];
        this.showDrawer = true;
        this.getList();
      },
      getList() {
        this.loading = true;
        listVehicle(this.queryParams)
          .then((resp) => {
            this.tableData = resp.rows;
            this.total = resp.total;
          })
          .finally(() => {
            this.loading = false;
          });
      },

      submitForm() {
        this.$refs["formData"].validate(valid => {
          if (valid) {
            if (this.vehicleItemOpType == "edit") {
              console.log("更换的index:" + this.editIndex)
              this.submitVehicleList.splice(this.editIndex, 1, {
                ...this.form
              });
              this.addVehicleContaToList();
              this.vehicleItemOpType = 'add';
            }else{
             let params = {
               ...this.form,
             };
             let existArr=this.submitVehicleList.filter(n=>n.transportId==params.transportId);
             if(existArr.length>0){
                this.$modal.msgWarning("车辆已存在");
               return;
             }
              this.submitVehicleList.push(params);
            }
            this.resetVehicleForm();
          }
        });
      },


      //点击编辑
      handleClickEdit(index, row) {
        this.vehicleItemOpType = 'edit';
        this.editIndex = index;
        this.form = {
          ...row
        };
      },

      deleteVehicleItem(index, rows) {
        rows.splice(index, 1);
      },
      deleteRow(index, rows) {
        this.submitVehicleList.splice(index, 1);
      },
    },
  };
</script>

<style lang="scss" scoped>
  .common-addBtn {
    margin-top: 15px;
  }

  .searchBox {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;

    ::v-deep .el-button--primary {
      padding: 5px 10px;
      border-radius: 5px;
    }

    .el-input {
      width: 200px;
      margin-right: 10px;
    }
  }

  ::v-deep .el-empty {
    padding: 10px 0;
  }

  ::v-deep .el-empty__description {
    margin-top: 0;

    p {
      font-size: 12px;
    }
  }

  .dialog-footer {
    text-align: center;
  }
</style>
